<script setup lang="ts">
import { AddCircle } from '@vicons/ionicons5';
import { Key, TreeOption } from '@z-vue3-ui/components/tree/src/tree';
import { reactive, ref } from 'vue';
import { FormInstance } from '@z-vue3-ui/components/form';
import { UploadRawFile } from '@z-vue3-ui/components/upload/src/upload';

function createData(level = 4, parentKey = '') {
  if (!level) return [];
  const arr = new Array(20 - level).fill(0);
  return arr.map((_, idx: number) => {
    const key = parentKey + level + idx;
    return {
      label: createLabel(level),
      key,
      children: createData(level - 1, key),
      // disabled: level === 3,
    };
  });
}

function createLabel(level: number): string {
  if (level === 4) return '道生一';
  if (level === 3) return '一生二';
  if (level === 2) return '二生三';
  if (level === 1) return '三生万物';
  return '';
}
// function createData() {
//   return [
//     { label: nextLabel(), key: 1, isLeaf: false },
//     { label: nextLabel(), key: 2, isLeaf: false },
//   ];
// }

function nextLabel(currentLabel?: string | number | undefined): string {
  if (!currentLabel) return 'Out of Tao, One is born';
  if (currentLabel === 'Out of Tao, One is born') return 'Out of One , Two';
  if (currentLabel === 'Out of One , Two') return 'Out of Two, Three';
  if (currentLabel === 'Out of Two, Three')
    return 'Out of Three, the created universe';
  if (currentLabel === 'Out of Three, the created universe')
    return 'Out of Tao, One is born';

  return '';
}

const data = ref(createData());
const handload = (node: TreeOption) => {
  return new Promise<TreeOption[]>((resolve) => {
    setTimeout(() => {
      resolve([
        {
          label: nextLabel(node.label)
          key: node.key + nextLabel(node.label),
          isLeaf: false,
        },
      ]);
    }, 2000);
  });
};
const value = ref<Key[]>([]);
const check = ref(true);
function onChange(e) {}
function handleButtonClick(e) {}
const InputValue = ref('hello');
const state = reactive({ username: '', password: '' });
const formRef = ref<FormInstance>();
const validateForm = () => {
  const form = formRef.value;
  console.log('validateForm-------------->', form);

  form?.validate((valid, errors) => {
    console.log(valid, errors);
  });
};
function handleBeforeUpload(rawFile: UploadRawFile) {
  console.log(rawFile);
  return true;
}
</script>

<template>
  <z-upload
    multiple
    :before-upload="handleBeforeUpload"
    action="http://localhost:4000/upload"
  >
    <z-button>点我上传</z-button>
  </z-upload>
  <z-icon :color="'red'" :size="80">
    <add-circle></add-circle>
    <add-circle></add-circle>
  </z-icon>
  {{ value }}
  <z-tree
    v-model:selectedKeys="value"
    :data="data"
    :on-load="handload"
    selectable
    :show-checkbox="true"
    :default-checked-keys="['40', '41']"
  >
    <template #default="{ node }">{{ node.key }} {{ node.label }}</template>
  </z-tree>
  {{ check }}
  <z-checkbox
    v-model="check"
    :disabled="false"
    :indeterminate="true"
    label="节点"
    @change="onChange"
  ></z-checkbox>
  <z-button
    size="medium"
    :type="'danger'"
    :round="true"
    icon-placemnt="right"
    @click="handleButtonClick"
  >
    按钮
    <template #icon>
      <z-icon>
        <add-circle />
      </z-icon>
    </template>
  </z-button>
  <z-input v-model="InputValue" show-password clearable>
    <template #prepend>珠峰</template>
    <template #prefixIcon>asd</template>
    <template #sufixIcon>icon</template>
    <template #append>sadasd</template>
  </z-input>
  <z-form
    ref="formRef"
    :model="state"
    :rules="{
      username: {
        min: 6,
        max: 10,
        message: '用户名6-10位',
        trigger: ['change', 'blur'],
      },
    }"
  >
    <z-form-item
      prop="username"
      :rules="[{ required: true, message: '请输入用户名', trigger: 'blur' }]"
    >
      <z-input v-model="state.username" />
      <template #label>用户名</template>
    </z-form-item>
    <z-form-item
      prop="passowrd"
      :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]"
    >
      <z-input v-model="state.password" type="password" />
      <template #label>用户密码</template>
    </z-form-item>
    <z-button @click="validateForm">提交</z-button>
  </z-form>
  <z-calendar></z-calendar>
</template>

<style></style>
